<template>
	<view class="box l-f l-row-sb">
		<view class="l-f">
			<view>
				<image class="box_icon" src="@/static/images/model-item.png" mode="widthFix"></image>
			</view>
			<view class="box_info">
				<view class="box_info_name">{{options.name}}</view>
				<view class="box_info_number">{{options.number}}</view>
			</view>
		</view>
		<view 
		v-if="current === 0" 
		@click="onDownload" 
		class="box_btn" 
		hover-class="hover-scale" 
		:hover-stay-time="100">下载</view>
		<view 
		v-if="current === 1" 
		@click="onUpdate" 
		class="box_btn"
		:class="options.status === 1 ? 'box_active' : ''"
		hover-class="hover-scale" 
		:hover-stay-time="100">{{options.status === 1 ? '已更新' : '更新'}}</view>
	</view>
</template>

<script>
	export default {
		name:"model-item",
		props: {
			current: {
				type: Number,
				default: 0
			},
			options: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			onDownload() {
				this.$emit('download')
			},
			onUpdate() {
				if(this.options.status === 1) return
				this.$emit('update')
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	background: linear-gradient(to bottom,rgba(11, 12, 13, 0.21),rgba(53, 54, 56, 0.40));
	box-shadow: 0 2rpx 2rpx 0 rgba(255, 255, 255, 0.25);
	filter: 20rpx;
	height: 184rpx;
	border-radius: 54rpx;
	margin-bottom: 46rpx;
	padding: 30rpx;
	box-sizing: border-box;
	&_icon {
		width: 150rpx;
		height: 150rpx;
	}
	&_info {
		&_name {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 700;
		}
		&_number {
			margin-top: 24rpx;
			font-size: 20rpx;
			color: rgba(136, 136, 136, 1);
		}
	}
	&_btn {
		background: linear-gradient(90deg, #48E4EF 0%, #2BCEB5 100%);
		color: #ffffff;
		width: 116rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border-radius: 36rpx;
		font-size: 30rpx;
	}
	&_active {
		background: rgba(133, 137, 137, 1);
		color: rgba(255, 255, 255, .4);
	}
}
</style>